import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Button, WhiteSpace, WingBlank } from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css';
import configureStore from './store/mini-store'; // 简版
import { connect, Provider } from './store/redux/react-redux'; // 简版
import {
  increment,
  decrement,
  asyncChangeAge,
  addTwo,
  promiseChangeAge,
} from './store/action';
import { Route, Link, Switch, Router, Redirect } from 'react-router';
import { useHistory, BrowserRouter } from 'react-router-dom';

const store = configureStore();

let About = (props) => {
  console.log('props: ', props);
  const history = useHistory();
  return (
    <>
      <h3>About</h3>
      <button onClick={() => history.goBack()}>go to index</button>
    </>
  );
};
About = connect((state) => state.counterReducer)(About);

let Index = (props) => {
  const history = useHistory();

  useEffect(() => {
    // 监听路由变化
    history.listen((router, action) => {
      console.log(router, action);
    });
  }, []);

  return (
    <>
      <WingBlank>
        <div>
          My name is {props.name}, My age is{' '}
          <h2 style={{ display: 'inline-block' }}>{props.age}</h2>
        </div>
      </WingBlank>
      <Button type="primary" onClick={() => props.increment()}>
        加
      </Button>
      <WhiteSpace size="sm" />
      <Button type="primary" onClick={() => props.decrement()}>
        减
      </Button>
      <WhiteSpace size="sm" />
      <Button type="primary" onClick={() => props.asyncChangeAge(2)}>
        async add
      </Button>
      <WhiteSpace size="sm" />
      <Button type="primary" onClick={() => props.addTwo()}>
        数组 add
      </Button>
      <WhiteSpace size="sm" />
      <button onClick={() => history.push('/about')}>go to about</button>
    </>
  );
};
const mapStateToProps = (state) => {
  const { counterReducer } = state;
  return counterReducer;
};

Index = connect(mapStateToProps, {
  increment,
  decrement,
  asyncChangeAge,
  addTwo,
  promiseChangeAge,
})(Index);

function App(props) {
  return (
    <>
      <BrowserRouter>
        <Route path="/index" component={Index} />
        <Route path="/about" component={About} />
      </BrowserRouter>
    </>
  );
}

function RootEle() {
  return (
    <Provider store={store}>
      <App />
    </Provider>
  );
}

ReactDOM.render(<RootEle />, document.getElementById('root'));
